<div class="default-background">
    <h2 class="flex-row-space-between">{{'AUTH_CENTER' |translate}} / {{'CACHE_DASHBOARD' |translate}}</h2>
    <div style="display: flex;justify-content: space-between; margin-bottom: 24px;">
        <button mat-raised-button (click)="sendReloadRequest()" color="primary">
            {{'RELOAD_PROXY_CACHE'| translate}}
        </button>
        <button mat-raised-button (click)="checkStatus()" color="primary">
            {{'CHECK_CACHE_STATUS'| translate}}
        </button>
    </div>
    <div class="table-container">
        <table mat-table [dataSource]="dataSource">

            <ng-container matColumnDef="instance">
                <th mat-header-cell *matHeaderCellDef> {{'INSTANCE_NAME'|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <ng-container *ngIf="row.name==='HOST'">
                        {{row.name|translate}}
                    </ng-container>
                    <ng-container *ngIf="row.name!=='HOST'">
                        {{'PROXY_NAME'|translate}}{{row.name}}
                    </ng-container>
                </td>
            </ng-container>

            <ng-container matColumnDef="value">
                <th mat-header-cell *matHeaderCellDef> {{'PROXY_VALUE'|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    {{row.value}}
                </td>
            </ng-container>
            <ng-container matColumnDef="result">
                <th mat-header-cell *matHeaderCellDef> {{'CHECK_RESULT'|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <ng-container *ngIf="row.name!=='HOST'">
                        <mat-icon *ngIf="getResult(row.value)" [color]="'primary'">
                            check_circle_outline
                        </mat-icon>
                        <mat-icon *ngIf="!getResult(row.value)" [color]="'primary'">cancel
                        </mat-icon>
                    </ng-container>
                    <ng-container *ngIf="row.name==='HOST'">
                        N/A
                    </ng-container>
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
    </div>
</div>